<template>
	<view class="modify-wrap">
		<view class="cell row b-b">
			<input class="input" type="text" maxlength="10" v-model="customerUserName" placeholder="请输入真实姓名" placeholder-class="placeholder" />
		</view>
		<view class="cell row b-b">
			<input class="input" type="number" maxlength="11" v-model="telNum" placeholder="请输入手机号码"
			 placeholder-class="placeholder" />
		</view>
		<view class="cell row">
			<text class="tit">VIP会员</text>
			<text class="super-name">{{superName}}</text>
		</view>
		<view class="submit-btn">
			<mix-button ref="confirmBtn" text="提交" icon="icon-jia2"
			:iconSize="36" :isConfirm="false"
			 @onConfirm="submit()"></mix-button>
		</view>
		<view class="apply-modal" v-if="applyModalFlag">
			<view class="apply-con">
				<view class="apply-con-close" @tap="jumpTo"><i class="iconfont iconguanbi3"></i></view>
				<view class="apply-con-title">申请成功</view>
				<view class="apply-con-img"><image src="~@/static/img/result-success.png"></view>
				<view class="apply-con-explain">您的“DR专属会员码”将在3个工作日内以短信形式发出，请您获取“DR专属会员码”后尽快完成注册。</view>
				<view class="apply-con-btn">
					<tui-button type="danger" width="500rpx" height="80rpx" :size="32" shape="circle" @tap="jumpTo">确认</tui-button>
				</view>
			</view>
		</view>
		<tui-modal></tui-modal>
		<loading></loading>
	</view>
</template>
<script>
	import mixButton from '@/components/mix-button/mix-button.vue';
	import tuiButton from '@/components/button/button';
	export default {
		components: {
			mixButton,
			tuiButton
		},
		data() {
			return{
				customerUserName:'',
				telNum:'',
				applyModalFlag:false,
				superName:''
			}
		},
		onLoad(options){
			let step=options.step;
			this.superName=options.vipMemberName;
			if(step==2||step==3){
				this.applyModalFlag=true;
			}
		},
		methods:{
			submit(){
				if (!this.customerUserName) {
					this.$util.msg('请输入真实姓名');
					this.$refs.confirmBtn.stop();
					return;
				}
				if (!this.$util.checkStr(this.telNum, 'mobile')) {
					this.$util.msg('请输入正确的手机号码');
					this.$refs.confirmBtn.stop();
					return;
				}
				let params={
					telNum:this.telNum,
					customerUserName:this.customerUserName
				}
				this.$http.drCodeApplySubmit(params).then((res) => {
					if (res.status === 0) {
						this.applyModalFlag=true;
					}
				})
				
			},
			jumpTo(){
				uni.reLaunch({
					url:'/pages/my/my'
				})
			}
		}
	}
</script>
<style lang="scss">
.modify-wrap{
		
		height: 100vh;
		margin-top:16rpx;
		.cell{
			padding: 0rpx 36rpx 0;
			height: 106rpx;
			font-size: 28rpx;
			background-color: #fff;
			.tit{
				min-width: 140rpx;
				font-size: 28rpx;
				color: #111111;
			}
			.input{
				flex: 1;
				font-size: 28rpx;
				color: #333;
				border: none;
				outline: none;
			}
			.iconfont{
				flex-shrink: 0;
				margin-right: 4rpx;
				font-size: 32rpx;
				color: #aaa;
				padding:6rpx;
			}
			switch{
				transform: scale(0.8) translateX(10rpx);
				transform-origin: center right;
			}
		}
		.apply-modal{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.6);
			z-index: 9999;
			display: flex;
			justify-content: center;
			align-items: center;
			transition:0.3s ease-in-out;
			.apply-con{
				width: 580rpx;
				height: 670rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 18rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 14rpx;
				position: relative;
				// display: flex;
				// flex-direction: column;
				// justify-content: center;
				// align-items: center;
				padding:16rpx 32rpx 30rpx;
				.apply-con-close{
					position: absolute;
					top:24rpx;
					right: 24rpx;
					color: #DEDEDE;
				}
				.apply-con-title{
					width: 100%;
					text-align: center;
					line-height: 60rpx;
					font-weight: bold;
					font-size: 32rpx;
				}
				.apply-con-img{
					width:260rpx;
					height: 260rpx;
					margin:30rpx auto;
					image{
						width:260rpx;
						height: 260rpx;
						margin-top:16rpx;
					}
				}
				.apply-con-explain{
					font-size: 24rpx;
					line-height:36rpx;
				}
				.apply-con-btn{
					margin:50rpx auto 0;
					width: 500rpx;
				}
			}
		}
		.submit-btn{
			margin-top: 60rpx;
		}
	}
</style>